<template>
  <el-form
      label-position="right"
      label-width="100px"
      :model="formdata"
      style="max-width: 460px">
    <el-form-item label="病历号">
      <el-input v-model="formdata.caseNumber" />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="formdata.realName" />
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="formdata.gender" placeholder="请选择性别" size="large">
        <el-option key="男" label="男" value="男"/>
        <el-option key="女" label="女" value="女"/>
      </el-select>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="formdata.age" />
    </el-form-item>
    <el-form-item label="出生日期">
      <el-date-picker
          v-model="formdata.birthday"
          type="date"
          placeholder="出生日期"
          size="large"/>
    </el-form-item>
    <el-form-item label="身份证号">
      <el-input v-model="formdata.cardNumber" />
    </el-form-item>
    <el-form-item label="家庭住址">
      <el-input v-model="formdata.homeAddress" />
    </el-form-item>
    <el-form-item label="结算类别id">
      <el-select v-model="formdata.settleCategoryId" placeholder="请选择结算类别" size="large">
        <el-option key="1" label="自费" value="1"/>
        <el-option key="2" label="市医保" value="2"/>
      </el-select>
    </el-form-item>
    <el-form-item label="看诊日期">
      <el-date-picker
          v-model="formdata.visitDate"
          type="date"
          placeholder="看诊日期"
          size="large"
          :shortcuts="shortcuts"/>
    </el-form-item>
    <el-form-item label="午别">
      <el-select v-model="formdata.noon" placeholder="请选择午别" size="large">
        <el-option key="上午" label="上午" value="上午"/>
        <el-option key="下午" label="下午" value="下午"/>
      </el-select>
    </el-form-item>
    <el-form-item label="挂号科室">
      <el-select
          @change="deptChange"
          v-model="formdata.deptmentId"
          placeholder="挂号科室"
          size="large">
        <el-option
            v-for="dept of $store.state.departments"
            :label="dept.deptName"
            :value="dept.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="号别">
      <el-select
          v-model="formdata.registLevelId"
          placeholder="号别"
          size="large">
        <el-option
            v-for="level of $store.state.registLevel"
            :label="level.registName"
            :value="level.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="看诊医生">
      <el-select v-model="formdata.employeeId" placeholder="看诊医生" size="large">
        <el-option
            v-for="doctor of visitDoctors"
            :label="doctor.realname"
            :value="doctor.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="初始号额">
      <el-input />
    </el-form-item>
    <el-form-item label="已用号额">
      <el-input />
    </el-form-item>
    <el-form-item label="病历本">
      <el-switch
          v-model="formdata.isBook" />
    </el-form-item>
    <el-form-item label="应收金额">
      <el-input v-model="price" />
    </el-form-item>
    <el-form-item label="收费方式">
      <el-select v-model="formdata.registMethod" placeholder="收费方式" size="large">
        <el-option key="现金" label="现金" value="现金"/>
        <el-option key="银行卡" label="银行卡" value="银行卡"/>
        <el-option key="微信" label="微信" value="微信"/>
        <el-option key="医保卡" label="医保卡" value="医保卡"/>
        <el-option key="支付宝" label="支付宝" value="支付宝"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">挂号</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'

export default {
  name: "OnsiteRegistrationView",
  data() {
    return {
      doctors: [],
      shortcuts: [
        {
          text: '今天',
          value: new Date(),
        },
        {
          text: '明天',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            return date
          },
        },
        {
          text: '一周后',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            return date
          },
        },
      ],
      formdata: {
        caseNumber: '1000',
        realName: '王二麻子',
        gender: '男',
        cardNumber: '210202199901011234',
        birthday: '1999-01-01',
        age: '23',
        ageType: '年',
        homeAddress: '辽宁省甘井子区凌水街道xxx',
        visitDate: '2022-09-21',
        noon: '上午',
        deptmentId: '1',
        employeeId: '1',
        registLevelId: '1',
        settleCategoryId: '1',
        isBook: false,
        registMethod: '医保卡',
        visitState: '1',
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.formdata)
      axios({
        url: '/api/register/insert',
        method: 'post',
        data: this.formdata
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      }).then(() => {
        console.log("finally");
      })
    },
    deptChange() {
      console.log("dept change")
      axios({
        url: "/api/employee/query_by_dept_id_or_no",
        method: 'post',
        data: {
          deptId: this.formdata.deptmentId
        }
      }).then(res => {
        this.doctors = res.data.data
      }).catch(err => {
      }).then(() => {
      })
    }
  },
  computed: {
    visitDoctors() {
      return this.doctors.filter(doctor => {
        // 是否为选择的挂号级别
        let isLevel = doctor.registLevelId == this.formdata.registLevelId

        // 是否为在班状态
        let schedulingIndex = new Date().getDay() * 2;
        if (new Date().getHours() >= 12) {
          schedulingIndex++
        }

        let atWork = doctor.scheduling.weekRule.split("")[schedulingIndex] == '1';

        return isLevel && atWork;
      })
    },
    price() {
      let result = 0;
      for (let level of this.$store.state.registLevel) {
        if (level.id == this.formdata.registLevelId) {
          result += level.registFee + (this.formdata.isBook ? 1 : 0)
        }
      }
      return result;
    }
  },
  mounted() {
    this.$store.dispatch('requestDepartments');
    this.$store.dispatch('requestRegistLevel');
  }
}
</script>

<style scoped>

</style>